<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>

<div id="app">
    <input v-model="search.name" name="name" placeholder="输入姓名"><br>
    <input v-model="search.address" name="address" placeholder="输入地址"><br>
    <button type="button" @click="findPage(1)">搜索</button>
    <table>
        <tr>
        <td>id</td>
        <td>name</td>
        <td>age</td>
        <td>sex</td>
        <td>address</td>
        <td>dname</td>
        <td>操作</td>
    </tr>
        <tr v-for="item in page.records">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>+98
            <td>{{item.sex}}</td>
            <td>{{item.address}}</td>
            <td>{{item.dname}}</td>
            <td>
                <a :href="'update.html?id='+item.id">修改</a>
                <button type="button" @click="del(item.id)">删除</button>
            </td>
        </tr>
    </table>
    <button type="button" @click="findPage(1)">首页</button>
    <button type="button" @click="findPage(page.current-1)">上一页</button>
    <button type="button" @click="findPage(page.current+1)">下一页</button>
    <button type="button" @click="findPage(page.pages)">尾页</button>
</div>
    <script>
        new Vue({
            el:"#app",
            data:{
                page:{},
                search:{}

            },
            created(){
                this.findPage(1)
            },
            methods:{
                findPage(pageNum){
                    axios.post("/person/findPage?pageNum="+pageNum,this.search).then(res=>{
                        this.page=res.data
                    })
                },
                del(id){
                    axios.get("/person/del?id="+id).then(
                        res=>{
                            this.findPage(1)
                        }
                    )
                }
            }
        })
    </script>

</body>
</html>